<template>
    <view>
        <!-- 导航区 -->
        <scroll-view scroll-x="true" class="ct_tab">
            <view class="ct_item" :class="{ 'ct_active': index == tabCur }" v-for="(item,index) in tabTitles" :key="index" @click="clickCtTab(index)">
                <view class="xx_active">
                    <text v-text="item.title"></text>
                    <view :class="{ 'bb_active': index == tabCur }"></view>
                </view>
            </view>
        </scroll-view>
        <!-- 内容区 -->
        <!-- 滑块视图 -->
        <!-- current:当前所在滑块的index； swiper需要设置一个高度，scroll-view中高度100% -->
        <swiper class='item-container' :current="tabCur" @change="tabChange" :style="{height: listHeight+'px'}">
            <swiper-item  v-for="(content,index) in tabList" :key="index">
                <scroll-view scroll-y="true" style="height: 100%;" refresher-enabled="true" refresher-background="#f2f3f4" :refresher-triggered="triggered"
            :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="scrolltolowerDef(index)">
                    <view style="margin: 20upx;" v-for="(demo, key) in content" :key="key">
                        <view class='content' @click="jump(demo)">
                            <image class='img' :src="demo.icon"></image>
                            <view class='main-content'>
                                    <text class='mian-title'>{{demo.title}}</text>
                                <view class='body-content'>
                                    <text style="font-weight:bold;font-size:27px;color:#FF8C00;margin-right:15upx;">{{demo.score}}分</text>
                                    <text class='body-content-s body-content-sale'>月售{{demo.monthSale}}</text>
                                    <text class='body-content-s'>{{demo.deliveryTime}}</text>
                                    <text class='body-content-s'>{{demo.distance}}</text>
                                    <text class='body-content-s'>起送{{demo.standard}}</text>
                                    <text class='body-content-s'>配送{{demo.distributionFee}}</text>
                                    <view style="margin: 10upx;">
                                        <text class='body-content-s body-content-evaluate-s body-content-evaluate'>“{{demo.evaluate}}”</text>
                                    </view>
                                     <view class='boy-content-discount'>
                                        <text class='body-content-ss'>20减10</text>
                                        <text class='body-content-ss'>20减10</text>
                                        <text class='body-content-ss'>20减10</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
import Config from '../../static/business_config.js';
export default {
    data() {
        return {
            // 下拉更新的状态
            triggered: false,
            // 当前所在导航和内容
            tabCur:0,
            tabTitles: [],
            tabList: [],
            listHeight: 1334
            }
        },
        components: {},
        onReady(){
            let self = this;
            uni.getSystemInfo({
                success(res) {
                    // 屏幕高度减去顶部导航的高度，这样就有了吸顶效果
                    self.listHeight = res.screenHeight - 62;
                }
            });
        },
        onLoad() {
            const self = this;
            self.tabTitles = Config.tabTitles;
            self.tabList = Config.BusinessInformation;
            self.triggered = true;
        },
        methods: {
            // 点击导航内容跳转
            clickCtTab(ctCur){
                const self = this;
                self.tabCur = ctCur
            },
            // 滑动内容跳转到导航
            tabChange(e){
                const self = this;
                self.tabCur=e.detail.current;
            },
            // 监控元素下拉位置
            onPulling(e) {
                // console.log("onpulling", e);
            },
            // 下拉更新操作函数
            onRefresh() {
                const self = this;
                // 模拟重新请求数据
                self.tabList = Config.BusinessInformation;
                setTimeout(() => {
                    this.triggered = false;
                }, 3000)
            },
            // 重置下拉
            onRestore() {
                const self = this;
                self.triggered = 'restore'; // 需要重置
                console.log("onRestore");
            },
            // 下拉被中止（应该是用一个事件中止下拉这个圈圈，上拉点击都会触发）
            onAbort() {
                console.log("onAbort", this.tabCur);
            },
            // 列表到底或者最右侧触发(但是这个上拉有点奇怪，要下拉一点再上拉到底)
            // 这里的参数index只是为了清晰看出下拉新增在对应tab下的数据
            scrolltolowerDef(index){
                // console.log(111111);
                const self = this;
                // 模拟请求上拉新增新增数据
                self.tabList[index].push(
                  {
                    icon: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3995323738,3528253073&fm=26&gp=0.jpg',
                    title: '肯德基(上拉)页面'+index,
                    score: '4.9',
                    monthSale: '1110',
                    deliveryTime: '14分钟',
                    distance: '1km',
                    standard: '¥0',
                    distributionFee: '¥5',
                    evaluate: '味道很不错！味道很不错！'
                  }
                );
            },
            // 页面跳转，navigateTo是不关闭当前页跳转，传对象数据时需要格式化一下，url参数是文件路径
            // 需要在pages.json中配置路由，否则不会跳转
            jump(demo){
                // console.log(demo, 11111);
                uni.navigateTo({
                    url: 'menu?params='+encodeURIComponent(JSON.stringify(demo))
                });
            }
        }
}
</script>

<style scoped>
.ct_tab{
    font-weight: bold;
    white-space: nowrap; /* 必要，导航栏才能横向*/
    overflow: hidden;
}
.ct_item{
    /* #ifdef H5 */
    padding: 15px 10px 26upx;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    /* 这里上面的内边距这个高是因为小程序的分享和关闭按钮位置问题 */
    padding: 75px 10px 26upx;
    /* #endif */
    display: inline-block; /* 必要，导航栏才能横向*/
}
.ct_item text{
    padding: 15px 0;
}
.xx_active {
    display:flex;
    flex-direction: column;
    align-items: center
}
.ct_active{
    color:#007AFF;
}
.bb_active{
    width: 20px;
    border-bottom: 2px solid #007AFF;
}
.item-container{
    /* width: 750upx; */
    background-color: #f2f3f4;
}
.content{
    display: flex;
    background-color: #ffffff;
    border-radius: 20px;
    margin: 10upx;
}
.img{
    margin-left: 20upx;
    width:600upx;
    height:250upx;
    left:5upx;
    top:35upx;
}
.main-content{
    margin: 20upx;
    align-content: flex-start;
    /*父元素设置超过宽度显示...*/
    overflow: hidden;
    text-overflow: ellipsis;
}
.mian-title{
    font-size:35upx;
    font-weight: bold;
    /*过长的子元素设置不换行*/
    white-space: nowrap;
}
.body-content{
    /*让字在一条水平线上*/
    align-items: baseline;
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    margin-top:5upx;
}
.body-content-s{
    font-size:27upx;
    color:#808080;
    margin-right:15upx;
    height: 45upx;
}
.body-content-sale{
    margin-right:40upx;
  }

.body-content-evaluate{
    background-color: #FFEBCD;
    padding: 5upx;
    border-radius: 10upx; 
}
.boy-content-discount{
    margin-top: 10upx; 
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #DCDCDC;
}
.body-content-ss{
    font-size:27upx;
    color:#F08080;
    margin-top:3upx;
    justify-content: center;
    padding: 0upx 10upx;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: #DCDCDC;
}

.body-content-ss:first-child{
    border-left:none;
}

/* #ifdef H5 */
/* 修改下拉后圈圈的默认颜色，修改nui默认样式前面需要加 /deep/ (ps. 据说小程序不需要加这个，加了反而失效，但是我看了，小程序加不加都没有用) */
/deep/ .uni-scroll-view-refresh__spinner circle{
    color: #007AFF !important;
}
/* 修改默认下拉时的样式颜色 */
/deep/ .uni-scroll-view-refresh__icon{
    fill: #007AFF !important;
}
/* #endif */
</style>